<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
        }
    </style>
</head>

<body>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <img data-src="./[Q4IWPA3G5NOHP@}X7[FC}G.gif">
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <img data-src="./KPPBJU}`@VL``KRG6[O)P]5.gif">
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <p>zw</p>
    <img data-src="./85XIT4L3TV(2HD7HMZPYCZ6.gif">


    <script>
        console.log(window.innerHeight);
        // const imgs = document.querySelectorAll('img');
        // window.addEventListener('scroll', (e) => {
        //     imgs.forEach((image) => {
        //         const imgTop = image.getBoundingClientRect().top;
        //         console.log(imgTop);
        //         if (imgTop < window.innerHeight) {
        //             const data_src = image.getAttribute('data-src');
        //             image.setAttribute('src', data_src);
        //         }
        //     })
        // })
        const callback = (entries) => {
            console.log(entries);
            entries.forEach(entry => {

                if (entry.isIntersecting) {
                    const image = entry.target;
                    const data_src = image.getAttribute('data-src');
                    observer.unobserve(image)
                    image.setAttribute('src', data_src);
                    console.log('触发');
                }
            });
        }
        const imgs = document.querySelectorAll('img');
        const observer = new IntersectionObserver(callback); // 开启观察者模式 （回调函数）
        // imgs遍历添加观察节点
        imgs.forEach(image => {
            observer.observe(image)
        });
    </script>
</body>

</html>